<template>
	<!-- 审批设置-穿梭框 -->

	<view class="m-transfer">
		<u-overlay :show="show" @click="overlayClick"></u-overlay>
		<u-transition :show="show" :customStyle="transitionStyle" :mode="position" :duration="duration"
			@afterEnter="afterEnter" @click="clickHandler">
			<view class="m-transfer__content">

				<slot>
					<view class="m-transfer-box x-c">
						<view class="m-transfer-box-content f-dc">
							<view class="m-transfer-box-content_top x-bc">
								<view class="m-transfer-box-content_top-title">
									<text>选择{{departments.title}}</text>
								</view>

								<view v-if="closeable" @tap.stop="close">
									<u-icon name="close" color="#333" size="20"></u-icon>
								</view>
							</view>

							<view class="m-transfer-box-content_main">
								<view class="m-transfer-box-content_main-leftBox f-dc">
									<view style="width: 80%;">
										<!-- <u-search v-model="searchValue" placeholder="搜索成员" :showAction="false"
											@search="search" shape="square"></u-search> -->
									</view>

									<view style="padding: 10px;">
										<u--text @click="getDepartmentList(0)" type="primary" text="部门列表"></u--text>
										<text v-for="(item,index) in departments.titleDepartments" class="ellipsis"
											:key="index+'a'"
											@click="getDepartmentList(item.id)">{{item.departmentName}}</text>
									</view>

									<view class="m-transfer-box-content_main-leftBox--listbox">
										<ul style="font-size: 14px;">
											<li class="x-bc check_box" style="font-size: 14px;"
												v-for="(item,index) in departments.childDepartments" :key="index+'b'">
												<view>
													<view class="x-f" style="margin-left: 6px;">
														<image style="width: 14px; height: 14px;"
															src="/static/assets/image/nodeWarp/icon_file.png">
														</image>
														{{item.departmentName}}
													</view>
												</view>

												<view @click="getDepartmentList(item.id)">
													<text>下级</text>
												</view>
											</li>
											<li v-for="(item,index) in departments.employees" :key="index+'c'"
												class="check_box" style="margin-bottom: 6px;">
												<!-- <view class="checkItem" -->
												<view :class="toggleClass(checkedEmployessList,item)&&'active'"
													style="padding: 10px;"
													@click="toChecked(checkedEmployessList,item)">
													<view class="x-f" style="margin-left: 6px;">
														<image style="width: 14px; height: 14px;margin-right: 2px;"
															src="/static/assets/image/nodeWarp/icon_people.png"></image>
														{{item.employeeName}}
													</view>
												</view>
											</li>
										</ul>
									</view>
								</view>

								<view class="m-transfer-box-content_main-rightBox">
									<view class="has_selected l f-dc" style="height: 100%;">
										<p class="clear x-bc" style="font-size: 14px;margin-bottom: 8px;">
											<text>已选（{{checkedDepartmentList.length+checkedEmployessList.length}}）</text>

											<text style="color: #46a0ff;"
												@click="checkedDepartmentList=[];checkedEmployessList=[]">清空</text>
										</p>


										<view class="m-transfer-box-content_main-rightBox--listbox"
											style="font-size: 14px;">
											<ul>
												<li class="x-bc" v-for="(item,index) in checkedDepartmentList"
													:key="index+'d'"
													style="margin-bottom: 6px;font-size: 14px;padding: 10px;">
													<view class="x-f">
														<image style="width: 14px; height: 14px;margin-right: 2px;"
															src="/static/assets/image/nodeWarp/icon_file.png"></image>
														<text>{{item.departmentName}}</text>
													</view>

													<image style="width: 14px; height: 14px;"
														src="/static/assets/image/nodeWarp/cancel.png"
														@click="removeEle(checkedDepartmentList,item)"></image>
												</li>
												<li class="x-bc" v-for="(item,index) in checkedEmployessList"
													:key="index+'e'" style="margin-bottom: 6px;padding: 4px 10px;">
													<view class="x-f">
														<image style="width: 14px; height: 14px;margin-right: 2px;"
															src="/static/assets/image/nodeWarp/icon_people.png"></image>
														<text>{{item.employeeName}}</text>
													</view>

													<image style="width: 14px; height: 14px;"
														src="/static/assets/image/nodeWarp/cancel.png"
														@click="removeEle(checkedEmployessList,item)"></image>
												</li>
											</ul>
										</view>
									</view>
								</view>
							</view>


							<view class="m-transfer-box-content_bottom x-ec">
								<button @click="close" class="content_bottom_primary_plainBtn CommonBtnSize">取消</button>
								<button @click="submit" class="content_bottom_primary_Btn CommonBtnSize">确定</button>
							</view>

						</view>

					</view>
				</slot>

			</view>
		</u-transition>
	</view>

</template>

<script>
	import props from './props.js';
	export default {
		name: 'm-transfer',
		mixins: [props],
		data() {
			return {
				searchValue: '',

				departments: uni.$m.utils.deepClone(this.option),
				checkedDepartmentList: [],
				checkedEmployessList: [],
			};
		},
		computed: {
			transitionStyle() {
				const style = {
					zIndex: this.zIndex,
					position: 'fixed',
					display: 'flex',
				}
				style[this.mode] = 0
				if (this.mode === 'left') {
					return uni.$u.deepMerge(style, {
						bottom: 0,
						top: 0,
					})
				} else if (this.mode === 'right') {
					return uni.$u.deepMerge(style, {
						bottom: 0,
						top: 0,
					})
				} else if (this.mode === 'top') {
					return uni.$u.deepMerge(style, {
						left: 0,
						right: 0
					})
				} else if (this.mode === 'bottom') {
					return uni.$u.deepMerge(style, {
						left: 0,
						right: 0,
					})
				} else if (this.mode === 'center') {
					return uni.$u.deepMerge(style, {
						alignItems: 'center',
						'justify-content': 'center',
						top: 0,
						left: 0,
						right: 0,
						bottom: 0
					})
				}
			},
			position() {
				if (this.mode === 'center') {
					return this.zoom ? 'fade-zoom' : 'fade'
				}
				if (this.mode === 'left') {
					return 'slide-left'
				}
				if (this.mode === 'right') {
					return 'slide-right'
				}
				if (this.mode === 'bottom') {
					return 'slide-up'
				}
				if (this.mode === 'top') {
					return 'slide-down'
				}
			},
		},
		created() {
			this.getDepartmentList();
		},
		watch: {
			option: {
				handler(nVal, oVal) {
					this.checkedDepartmentList = JSON.parse(JSON.stringify(nVal.childDepartments));
					this.checkedEmployessList = JSON.parse(JSON.stringify(nVal.employees));

				},
				deep: true
			},
		},
		methods: {
			// 点击遮罩
			overlayClick() {
				if (this.closeOnClickOverlay) {
					this.$emit('close')
				}
			},
			close(e) {
				this.$emit('close')
			},
			submit() {
				this.$emit('submit', {
					checkedDepartmentList: this.checkedDepartmentList,
					checkedEmployessList: this.checkedEmployessList,
				})
			},
			afterEnter() {
				this.$emit('open')
			},
			clickHandler() {
				// 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
				if (this.mode === 'center') {
					this.overlayClick()
				}
				this.$emit('click')
			},
			search() {

			},


			toggleClass(arr, elem, key = 'id') {
				return arr.some(item => {
					return item[key] == elem[key]
				});
			},
			toChecked(arr, elem, key = 'id') {
				console.log(elem);
				var isIncludes = this.toggleClass(arr, elem, key);
				!isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key);
			},
			removeEle(arr, elem, key = 'id') {
				var includesIndex;
				arr.map((item, index) => {
					if (item[key] == elem[key]) {
						includesIndex = index
					}
				});
				arr.splice(includesIndex, 1);
			},
			getDepartmentList(parentId = 0) {
				var that = this;
				var sql = "select * from Hr_Class where ClassCode!='LZM' and UpID=" + parentId;
				sql += " select a.* from SYS_User a,Hr_Employee b\
			        where a.EmplID = b.EmplID and b.ClassID=   " + parentId;
				this.Request.requestByUrl("/SQLData/GetDataBySql", {
					// programId: localStorage.getItem("programId"),
					programId: 0,
					sql: sql
				}, function(data) {
					// data = data.data;
					that.departments = {};
					let childDepartments = [];
					for (var i = 0; i < data.ds.length; i++) {
						childDepartments.push({
							"departmentKey": data.ds[i].ClassName,
							"departmentName": data.ds[i].ClassName,
							"id": data.ds[i].ClassID.toString(),
							"parentId": data.ds[i].UpID.toString(),
							"departmentNames": data.ds[i].ClassName
						});
					}
					let employees = [];
					for (var i = 0; i < data.ds1.length; i++) {
						employees.push({
							"id": data.ds1[i].UserID.toString(),
							"employeeName": data.ds1[i].UserName,
							"isLeave": "0",
							"open": "false"
						})
					}
					that.departments.childDepartments = childDepartments;
					that.departments.employees = employees;
				}, "json");
			},
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.active {
		background: #dcdfe6;
	}

	.check_box {
		.checkItem {
			position: relative;
			padding-left: 14px;

			&::before {
				position: absolute;
				width: 14px;
				height: 14px;
				border: 1px solid #dcdfe6;
				border-radius: 2px;
				left: 0;
				top: 1px;
				content: "";
			}
		}

		// .active::after {
		// 	position: absolute;
		// 	width: 14px;
		// 	height: 14px;
		// 	border-radius: 50%;
		// 	z-index: 99999;
		// 	top: 5px;
		// 	left: 3px;
		// 	content: "";
		// 	background-image: url('/static/assets/image/nodeWarp/check_box.png');
		// 	background-repeat: no-repeat;
		// }
	}

	.m-transfer {

		&-box {
			height: 100%;

			&-content {
				width: 80vw;
				height: 70vh;
				background-color: #fff;

				&_top {
					padding: 15px;

					&-title {
						font-size: 16px;
					}
				}

				&_main {
					flex: 1;
					display: flex;
					padding: 10px;

					&-leftBox {
						flex: 1;
						padding: 10px;
						border: 1px solid #f5f5f5;

						&--listbox {
							flex: 1;
							overflow: auto;
						}
					}

					&-rightBox {
						flex: 1;
						padding: 10px;
						border: 1px solid #f5f5f5;

						&--listbox {
							flex: 1;
							overflow: auto;
						}
					}
				}

				&_bottom {
					height: 60px;

					button {
						margin-right: 10px;
					}
				}
			}
		}

	}
</style>